import React, {useEffect, useState, useRef} from 'react'
import {DownloadOutlined} from '@ant-design/icons'
import {
    Button,
    Col,
    Flex,
    Form,
    Input,
    Row,
    Select,
    Typography,
    Table,
    Alert,
    Modal,
    Tabs
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import BasicInfo from '../components/BasicInfo'
import BehaviorInteraction from '../components/BehaviorInteraction'
import CustomReturn from '../components/CustomReturn'
import {userList} from '../service/user'
import moment from 'moment'
import PlatformBasicInfo from '../components/PlatformBasicInfo'

export default function UserList() {
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 保存店铺列表
    const [storeList, setStoreList] = useState([])
    // 保存页码
    const [pageNo, setPageNo] = useState(1)
    // 总数据量
    const [total, setTotal] = useState(0)
    // 预设日期
    // 保存表格中选中的项
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 表格中是否有选中
    const hasSelected = selectedRowKeys.length > 0
    // 创建表单的引用
    const formRef = useRef()
    // 模态框
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 模态框2
    const [isModalOpen2, setIsModalOpen2] = useState(false)
    // 搜索条件
    const [condition, setCondition] = useState({})
    // 用于更新列表
    const [n, setN] = useState(1)
    const request = async () => {
        const res = await userList({
            ...condition,
            pageNo,
            pageSize: 10
        })
        console.log(res)
        if (res.data) {
            setStoreList(res.data.objects)
            setTotal(res.data.total)
        }
    }
    useEffect(() => {
        request()
    }, [n, pageNo])

    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        {/* <Button type="primary" icon={<DownloadOutlined />}>
              数据下载
            </Button> */}
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form
                        layout="inline"
                        onFinish={async (values) => {
                            // setCondition(values)
                            // console.log(values)
                            // await request()
                            // setN(n + 1)
                        }}
                    >
                        <Form.Item label="用户姓名：" name="storeName">
                            <Input/>
                        </Form.Item>
                        <Form.Item label="手机号：" name="storeHeadPhone">
                            <Input type="phone"/>
                        </Form.Item>
                        <Form.Item label="渠道来源：" name="storeAddress">
                            <Select
                                style={{width: 200}}
                                placeholder="渠道选择"
                                options={[
                                    {
                                        value: '',
                                        label: '全部'
                                    },
                                    {
                                        value: '0',
                                        label: 'APP'
                                    },
                                    {
                                        value: '1',
                                        label: '小程序'
                                    },
                                    {
                                        value: '2',
                                        label: '支付宝生活号'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="注册时间">
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        用户列表
                    </Typography.Paragraph>
                    {hasSelected && (
                        <Alert
                            message={`已经选择 ${selectedRowKeys.length} 项`}
                            type="info"
                            showIcon
                        />
                    )}
                </Col>
                <Col span={24}>
                    <Table
                        pagination={{
                            total,
                            defaultCurrent: 1,
                            onChange: async (page) => {
                                setPageNo(page)
                            }
                        }}
                        rowKey="id"
                        rowSelection={{
                            selectedRowKeys,
                            onChange: (newSelectedRowKeys) => {
                                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                                setSelectedRowKeys(newSelectedRowKeys)
                            }
                        }}
                        dataSource={storeList}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '昵称',
                                dataIndex: 'nickName',
                                key: 'nickName'
                            },
                            {
                                title: '性别',
                                dataIndex: 'sex',
                                key: 'sex',
                                render: (text, record) => <>男</>
                            },
                            {
                                title: '手机号',
                                dataIndex: 'phone',
                                key: 'phone'
                            },
                            {
                                title: '账号',
                                dataIndex: 'userName',
                                key: 'userName'
                            },
                            {
                                title: '用户标签',
                                dataIndex: 'storeHeadPhone',
                                key: 'storeHeadPhone',
                                render: (_, record) => {
                                    return <>查看（5）</>
                                }
                            },
                            {
                                title: '注册渠道',
                                dataIndex: 'providerType',
                                key: 'providerType',
                                render: (_, record) => {
                                    switch (record.providerType) {
                                        case 0:
                                            return 'APP'
                                        case 1:
                                            return '小程序'
                                        case 2:
                                            return '支付宝生活号'
                                        default:
                                            return '未知'
                                    }
                                }
                            },
                            {
                                title: '最近登录时间',
                                dataIndex: 'lastLogTime',
                                key: 'lastLogTime',
                                render: (_, record) => {
                                    return (
                                        <>
                                            {moment(record.lastLogTime).format('YYYY-MM-DD HH:mm:ss')}
                                        </>
                                    )
                                }
                            },
                            {
                                title: '注册时间',
                                dataIndex: 'regTime',
                                key: 'regTime',
                                render: (_, record) => {
                                    return (
                                        <>{moment(record.regTime).format('YYYY-MM-DD HH:mm:ss')}</>
                                    )
                                }
                            },
                            {
                                title: '操作',
                                dataIndex: 'op',
                                key: 'op',
                                align: 'center',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <a
                          onClick={() => {
                              // 获取当前登录的管理员信息，模态框1-商家  2-平台(当前)
                              setIsModalOpen2(true)
                          }}
                      >
                        详情
                      </a>
                    </span>
                                    )
                                }
                            }
                        ]}
                    />
                </Col>
            </Row>
            <Modal
                title="用户详情"
                open={isModalOpen}
                onCancel={() => setIsModalOpen(false)}
                maskClosable={false}
                width={750}
                destroyOnClose
                footer={null}
            >
                <Tabs
                    style={{paddingBottom: 20, height: 600}}
                    items={[
                        {
                            key: '1',
                            label: '基本信息',
                            children: <BasicInfo/>
                        },
                        {
                            key: '2',
                            label: '行为互动',
                            children: <BehaviorInteraction/>
                        },
                        {
                            key: '3',
                            label: '客户回访',
                            children: <CustomReturn/>
                        }
                    ]}
                />
            </Modal>
            <Modal
                title="用户详情"
                open={isModalOpen2}
                onCancel={() => setIsModalOpen2(false)}
                maskClosable={false}
                width={750}
                destroyOnClose
                footer={null}
            >
                <Tabs
                    style={{paddingBottom: 20, height: 470}}
                    items={[
                        {
                            key: '1',
                            label: '基本信息',
                            children: <PlatformBasicInfo/>
                        }
                    ]}
                />
            </Modal>
        </>
    )
}
